import { Icon, Title } from "@/components";
import { colors } from "@/data/shared/colors";
import { View } from "@tarojs/components";
import { PropsWithChildren, useState } from "react";
import style from "./index.module.scss";

type AbstractAccordionProps = {
  title: string;
  defaultOpen?: boolean;
  bottomBorderColor?: string;
  notoSans?: boolean;
  smallTitle?: boolean;
};

const AbstractAccordion = ({
  title,
  defaultOpen = false,
  children,
  bottomBorderColor = colors.colorBeige,
  notoSans = false,
  smallTitle = false,
}: PropsWithChildren<AbstractAccordionProps>) => {
  const [open, setOpen] = useState(defaultOpen);

  return (
    <View
      className={style["accordion-wrapper"]}
      style={{ borderBottom: `1px solid ${bottomBorderColor}` }}
    >
      <View
        className={`${style.bar} ${open ? style.active : null}`}
        onClick={() => setOpen(!open)}
      >
        {/* <Title noSpacing> */}
        <Title
          noSpacing
          className={`${notoSans ? style["title-noto-sans"] : null} 
          ${smallTitle ? style["title-small"] : null}`}
        >
          {title}
        </Title>
        <Icon type="DownChevron" className={style.chevron} />
      </View>
      <View className={`${style.content} ${open ? style.active : null}`}>
        {children}
      </View>
    </View>
  );
};

export default AbstractAccordion;
